<template>
  <div class="bodyContent">
    <van-tabs v-model="active">
      <van-tab title="广场">
        <input
          type="text"
          name=""
          id="iptext"
          placeholder="哪些歌洗澡的时候会经常哼?"
          v-model="this.val"
          @input="getDetail()"
        />
        <div class="wrapper">
          <div v-for="(item, index) in list1" :key="index">
            <img :src="item.imgsrc" alt="" />
            <p class="p1">{{ comment }}</p>
            <p class="p2">
              <van-icon
                name="play"
                color="rgb(209,209,209)"
              />562.1万&nbsp;&nbsp;&nbsp;&nbsp;<van-icon
                name="fire"
                color="rgb(209,209,209)"
              />4.4万
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="演唱">
        <input
          type="text"
          name=""
          id="iptext"
          placeholder="哪些歌洗澡的时候会经常哼?"
          v-model="this.val"
          @input="getDetail()"
        />
        <div class="wrapper">
          <div v-for="(item, index) in list2" :key="index">
            <img :src="item.al.picUrl" alt="" />
            <p class="p1" v-text="item.name"></p>
            <p class="p2">
              <van-icon
                name="play"
                color="rgb(209,209,209)"
              />562.1万&nbsp;&nbsp;&nbsp;&nbsp;<van-icon
                name="fire"
                color="rgb(209,209,209)"
              />4.4万
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="音乐安利">
        <input
          type="text"
          name=""
          id="iptext"
          placeholder="哪些歌洗澡的时候会经常哼?"
          v-model="this.val"
          @input="getDetail()"
        />
        <div class="wrapper">
          <div v-for="(item, index) in list3" :key="index">
            <img :src="item.picUrl" alt="" />
            <p class="p1" v-text="item.name"></p>
            <p class="p2">
              <van-icon
                name="play"
                color="rgb(209,209,209)"
              />562.1万&nbsp;&nbsp;&nbsp;&nbsp;<van-icon
                name="fire"
                color="rgb(209,209,209)"
              />4.4万
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="演奏">
        <input
          type="text"
          name=""
          id="iptext"
          placeholder="哪些歌洗澡的时候会经常哼?"
          v-model="this.val"
          @input="getDetail()"
        />
        <div class="wrapper">
          <div v-for="(item, index) in list4" :key="index">
            <img
              :src="item.sharePicUrl"
              alt="加载失败"
              style="background-clip: center"
            />
            <p class="p1" v-text="item.title"></p>
            <p class="p2">
              <van-icon
                name="play"
                color="rgb(209,209,209)"
              />562.1万&nbsp;&nbsp;&nbsp;&nbsp;<van-icon
                name="fire"
                color="rgb(209,209,209)"
              />4.4万
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="MV">
        <input
          type="text"
          name=""
          id="iptext"
          placeholder="哪些歌洗澡的时候会经常哼?"
          v-model="this.val"
          @input="getDetail()"
        />
        <div class="wrapper">
          <div
            v-for="(item, index) in list5"
            :key="index"
            @click="getPlay(item.data.vid)"
          >
            <img
              :src="item.data.coverUrl"
              alt="加载失败"
              style="background-clip: center"
            />
            <p class="p1" v-text="item.data.title"></p>
            <p class="p2">
              <van-icon
                name="play"
                color="rgb(209,209,209)"
              />562.1万&nbsp;&nbsp;&nbsp;&nbsp;<van-icon
                name="fire"
                color="rgb(209,209,209)"
              />4.4万
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="小视频">
        <input
          type="text"
          name=""
          id="iptext"
          placeholder="哪些歌洗澡的时候会经常哼?"
          v-model="this.val"
          @input="getDetail()"
        />
        <div class="wrapper">
          <div
            v-for="(item, index) in list6"
            :key="index"
            @click="getPlay(item.data.vid)"
          >
            <img
              :src="item.data.coverUrl"
              alt="加载失败"
              style="background-clip: center"
            />
            <p class="p1" v-text="item.data.title"></p>
            <p class="p2">
              <van-icon
                name="play"
                color="rgb(209,209,209)"
              />562.1万&nbsp;&nbsp;&nbsp;&nbsp;<van-icon
                name="fire"
                color="rgb(209,209,209)"
              />4.4万
            </p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  getRecommend,
  getVideo,
  getRecommendSongs,
  getHotTopic,
} from "../../api/find";
import { allMv } from "../../api/Ksing";
export default {
  components: {},
  data() {
    return {
      list1: [
        {
          imgsrc:
            "https://modao.cc/uploads4/images/5975/59759557/v2_qmltaw.png",
        },
        {
          imgsrc:
            "https://modao.cc/uploads4/images/5975/59759586/v2_qmltba.png",
        },
        {
          imgsrc:
            "https://modao.cc/uploads4/images/5976/59762761/v2_qmlunf.png",
        },
        {
          imgsrc:
            "https://modao.cc/uploads4/images/5976/59762845/v2_qmluot.png",
        },
        {
          imgsrc:
            "https://modao.cc/uploads4/images/5976/59762798/v2_qmluo4.png",
        },
        {
          imgsrc:
            "https://modao.cc/uploads4/images/5976/59762817/v2_qmluod.png",
        },
        {
          imgsrc:
            "https://modao.cc/uploads4/images/5976/59762870/v2_qmlupa.png",
        },
        {
          imgsrc:
            "https://modao.cc/uploads4/images/5976/59762889/v2_qmlupl.png",
        },
      ],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: [],
      comment: "最近Lisa的“螃蟹舞”彻底火了！全网…都在模仿，魔性舞蹈太上头",
      active: 0,
      val: "",
      limit: 20,
      offset: 1,
    };
  },

  computed: {},
  watch: {},

  methods: {
    getPlay(id) {
      this.$router.push("/playDetail/" + id);
    },
    async getList6() {
      const result = await allMv({ offset: this.offset });
      console.log("-----------------------------------------");
      console.log(result, "list6");
      this.list6 = result.data.datas;
    },
    async getList5() {
      const result = await getVideo();
      this.list5 = result.data.datas;
      console.log("list5", result);
    },
    async getList4() {
      const result = await getHotTopic({ limit: this.limit });
      this.list4 = result.data.hot;
      console.log(this.list4);
      // this.comments = result.data.hot;
      // this.detail = result.data.hot.text;
    },
    async getList3() {
      const result = await getRecommend();
      this.list3 = result.data.recommend;
      console.log("list3", this.list3);
    },
    async getList2() {
      const result = await getRecommendSongs();
      this.list2 = result.data.data.dailySongs;
      console.log("list2", this.list2);
    },
  },
  created() {
    this.getList6();
    this.getList5();
    this.getList4();
    this.getList3();
    this.getList2();
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
};
</script>
<style scoped>
.bodyContent {
  max-height: 2000px;
}
#iptext {
  display: block;
  width: 90%;
  height: 37px;
  margin: 10px auto 20px auto;
  font-size: 14px;
  line-height: 37px;
  text-align: center;
  border-radius: 20px;
  background: rgba(232, 232, 232, 0.57);
  border: none;
  color: rgb(136, 136, 136);
}
.wrapper {
  padding-left: 30px;
  padding-right: 10px;
  padding-bottom: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 230px 230px 230px 230px;
  /* height: 1000px; */
  /* grid-template-rows: ; */
  /* overflow: hidden; */
  /* border: 1px solid black; */
}

.wrapper div {
  width: 140px;
  height: 210px;
  /* border: 1px solid red; */
  border-radius: 17px;
  /* margin-bottom: 8px; */
  overflow: hidden;
}

.wrapper div img {
  display: block;
  height: 71%;
}
.wrapper div .p1 {
  height: 28px;
  margin: 4px 8px;
  font-size: 14px;
  color: rgb(94, 94, 94);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
}

.wrapper div .p2 {
  padding: 5px 10px 10px 12px;
  color: rgb(209, 209, 209);
  /* margin: 0 auto; */
}
/* .firstCircle{
  display: flex;

} */
</style>